<template>
    <div class="margin-bottom">
        <a-flex gap="middle">
            <a-card class="flex-item">
                <a-space :size="16">
                    <div class="circle"><HourglassOutlined class="icon"/></div>
                    <a-statistic title="进行中项目数" :value="112893"/>
                </a-space>
            </a-card>
            <a-card class="flex-item">
                <a-space :size="16">
                    <div class="circle">
                        <img src="@/assets/svg/month.svg" width="20"/>
                    </div>
                    <a-statistic title="本月项目数" :value="112893"/>
                </a-space>
            </a-card>
            <a-card class="flex-item">
                <a-space :size="16">
                    <div class="circle"><img src="@/assets/svg/quarter.svg" width="20"/></div>
                    <a-statistic title="季度项目数" :value="112893"/>
                </a-space>
            </a-card>
            <a-card class="flex-item">
                <a-space :size="16">
                    <div class="circle"><img src="@/assets/svg/year.svg" width="20"/></div>
                    <a-statistic title="年度项目数" :value="112893"/>
                </a-space>
            </a-card>
            <a-card class="flex-item">
                <a-space :size="16">
                    <div class="circle"><project-outlined class="icon"/></div>
                    <a-statistic title="项目总数数" :value="112893"/>
                </a-space>
            </a-card>
        </a-flex>
    </div>

</template>

<script lang="ts" setup>
import { HourglassOutlined,ProjectOutlined} from '@ant-design/icons-vue';
</script>

<style scoped>
    .flex-item{flex: 1;}
    .circle {
        width: 40px;
        height: 40px;
        background-color: #f5f5f5;
        border-radius: 40px;
       display: flex;
       align-items: center;
       justify-content: center;
    }
    .circle .icon{font-size: 20px;color: #999;}
</style>